<template>
    <Modal v-model="exceptionModel" width="700" :closable="false" :mask-closable="false">
        <p slot="header" style="color:#ed4014;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>系统发生错误或异常</span>
        </p>
        <div>
            <div style="text-align: center">
                <img src="../images/system-fail.png" width="140" style="margin: 10px 0px;">
                <h3 style="text-align: center">小墨发生了致命错误，抱歉不能继续为主人服务了！<br/>Sorry, But an error has occurred ！</h3>
            </div>
            <div style="display: flex;flex-direction: row;align-items: flex-end;margin: 20px; margin-top: 40px;">
                <div ref="refundQRCode"></div>
                <div style="display: flex;flex-direction: column;margin-left: 10px;">
                    <p style="margin-bottom: 10px;">若您已经付费，请扫描右侧二维码获取退款与额外补偿，<br/>或保留下方PUM码至微信公众号反馈。</p>
                    <p style="color: #2d8cf0">随机用户编码(PUM)：</p>
                    <p style="font-size: 22px">{{printUserMark}}</p>
                </div>
            </div>
        </div>
        <div slot="footer">
            <Table :columns="title" :data="errorMsg"></Table>
            <v-countdownButton ref="countdown" style="font-size:16px;margin-top: 10px;"></v-countdownButton>
        </div>
    </Modal>
</template>

<script>
    import CountdownButton from '../components/CountdownButton.vue';
    import QRCode from 'qrcodejs2';

    export default {
        components: {
            'v-countdownButton': CountdownButton,
        },
        data() {
            return {
                title: [
                    {
                        title: '执行结果',
                        key: 'state',
                        width: 100
                    },
                    {
                        title: '代码',
                        key: 'code',
                        width: 80
                    },
                    {
                        title: '异常信息',
                        key: 'msg'
                    }
                ],
                errorMsg: [],
                exceptionModel: false,
                printUserMark: null,
                isFirstInit: true,
            };
        },
        props: {},
        methods: {
            openExceptionModel(printUserMark, errorMsg, errorCode = "-1", state = "ERROR", isNeedStopServer) {
                if (isNeedStopServer) {
                    this.$refs.countdown.countDownStart(60, "/StopServer");
                } else {
                    this.$refs.countdown.countDownStart(60);
                }
                this.printUserMark = printUserMark;
                var errorInfo = {};
                errorInfo.code = errorCode;
                errorInfo.state = state;
                errorInfo.msg = errorMsg;
                this.errorMsg.push(errorInfo);

                if(this.isFirstInit){
                    new QRCode(this.$refs.refundQRCode, {
                        text: this.$root.serverUrl + this.$root.userErrorRefundPageUrl + "?printUserMark=" + this.$root.printUserMark,
                        width: 100,
                        height: 100,
                        colorDark: "#333333", //二维码颜色
                        colorLight: "#ffffff", //二维码背景色
                        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                    })
                    this.isFirstInit=false;
                }

                // new QRCode(this.$refs.refundQRCode, {
                //     text: this.$root.serverUrl + this.$root.userErrorRefundPageUrl + "?printUserMark=" + this.$root.printUserMark,
                //     width: 100,
                //     height: 100,
                //     colorDark: "#333333", //二维码颜色
                //     colorLight: "#ffffff", //二维码背景色
                //     correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                // })

                this.exceptionModel = true;
            },
        }
    }
</script>

<style scoped>

</style>